<template>
  <div class="sum">
    <div class="count" @click.stop="decreaseCount(-1,food.item_id)" v-if="food.count > 0">-</div>
    <div class="num" v-if="food.count > 0">{{food.count}}</div>
    <div @click.stop="decreaseCount(1,food.item_id)" class="count count-sum">+</div>

  </div>
</template>
<script>
export default {
  props: {
    food: Object
  },
  name: 'CartControll',
  data () {
    return {
    }
  },
  created () {
  },
  computed: {
  },
  methods: {
    decreaseCount (e,id) {
      this.$emit('decreaseCount', e, id)
    }
  },
}
</script>
<style  scoped>
.sum {
  position: relative;
  display: flex;
}
.count {
  height: 0.5rem;
  width: 0.5rem;
  background-color: rgb(15, 156, 238);
  border-radius: 50%;
  text-align: center;
  line-height: 0.5rem;
  color: #fff;
  font-size: 0.5rem;
}
.num {
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 50%;
  text-align: center;
  line-height: 0.5rem;
  font-size: 0.3rem;
}
.count-sum {
 
  margin-left: auto;
}
</style>
